<template>
	<view class="header-www">
		<view :style="{height: statusBarHeight + 'px',background: backgroundColor}"></view>
		<view class="w100p common_header" :style="{background: backgroundColor, color: color}">
			<view class="back_btn" @click="goback" v-if="isBack">
				<u-icon name="arrow-left" size="40rpx" :color="color"></u-icon>
			</view>
			<text class="header_title"> {{ title }} </text>
			<view class="header_right" v-if="isRight">
				<slot name="right"></slot>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		props: {
			title: {
				type: String,
				default: "",
			},
			backgroundColor: {
				type: String,
				default: 'transparent'
			},
			color: {
				type: String,
				default: '#333'
			},
			isBack: {
				type: Boolean,
				default: true,
			},
			isRight: {
				type: Boolean,
				default: false,
			},
			isGoApp: {
				type: Boolean,
				default: false,
			}
		
		},
		data() {
			return {
				modal: false,
				statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
			}
		},
		mounted() {
			
		},
		methods: {
	
			goback() {
				// 返回app
				if (this.isGoApp) {
					uni.navigateBack({
						delta:1,
						isGoApp: true,
					})
				} else {
					uni.navigateBack({
						delta:1,
					})
				}
			
			},
		}
	}
</script>

<style lang="less" scoped>
	.header-www {
		width: 100%;
	}
	.common_header {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 10;
		flex: none;
		box-sizing: content-box;

		.header_title {
			flex: none;
			font-size: 34rpx;
			line-height: 1.2;
			font-weight: 600;
			width: 500rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: center;
		}

		.back_btn {
			position: absolute;
			z-index: 2;
			top: 53%;
			left: 24rpx;
			transform: translateY(-50%);
			box-sizing: border-box;

			.goback_img {
				position: relative;
				width: 20rpx;
				display: block;
			}
		}

		.header_right {
			position: absolute;
			right: 0;
			z-index: 2;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			padding: 0 40rpx;
			box-sizing: border-box;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>